
	
Uploader = function(){
	
	var files = [];
	var limitTotalSize = 0;
	var limitTotalFileCount = 0;
	var limitAFileSize = 0;
	
	return {
	
		browse:
		function(){},
			
		addFile:
		function( file ){
			files.push( file );
		},
			
		removeFile:
		function( file ){ 
			var index = files.indexOf( file );
			if( index == -1 ) return;
			return files.splice( index, 1 );
		},
			
		getFileAt:
		function( index ){ return fils[ index ]; },
		
	};
};

/*
( function(){
	
	var files;
	var limitTotalSize;
	var limitTotalFileCount;
	var limitAFileSize;
	
	Uploader = function(){
			
	};
	console.log( Uploader );
	
})();
*/

var $fileBrowse = $( ".file_browse" );
var $fileList = $( ".uploader_file_list" );
var $totalProgress = $( ".uploader_uploaded_total" );
var $fileTotalSizeLabel = $( ".uploader_footer .uploader_desc_filesize");
var fileList = [];
var fileTotalSize = 0;
var xhr;
var formData;
var uploadCount = 0;
var uploadedTotal = 0;
var currentUploaded = 0;

$fileBrowse.on( "change", function(){
	var files = $fileBrowse.prop( "files" )
	createFileItems(  files );
	addEventFileItem();
	updateTotalSize();
});

$( ".uploader_control_add" ).on( "click", function(){
	$fileBrowse.trigger( "click" );
});

$( ".uploader_control_upload" ).on( "click", function(){
	if( fileList.length == 0 ) return;	
	startupUpload();
});

function startupUpload(){
	$( ".uploader_desc_filesaction a"  ).hide(); 			
	uploadAt( uploadCount ); 
}

function uploadAt( index ){
	
	xhr = new XMLHttpRequest();
	var upload = xhr.upload;
	var $currentItem;
	var $currentItemStatus;
	var $currentItemAction;
	var $items = $( ".file_item" );
	
	upload.addEventListener( "loadstart", function( event ){
		$currentItem = $items.eq( uploadCount );
		$currentItemStatus = $currentItem.find( ".uploader_desc_filestatus" );
		$currentItemAction = $currentItem.find( ".uploader_desc_filesaction a" );
		$currentItem.addClass( "file_item_uploading" );
	});
	
	upload.addEventListener( "progress", function( event ){
		currentUploaded = event.loaded;
		$currentItemStatus.text( Math.ceil( event.loaded /  event.total * 100 ) +"%" );
		$totalProgress.prop( "value" , (uploadedTotal + event.loaded)/1000 );
	});
	
	upload.addEventListener( "load", function( event ){
		uploadCount++;
		uploadedTotal += currentUploaded;
		currentUploaded = 0;
		$currentItemAction.off( "click" );
		$currentItemAction.show();
		$currentItemAction.addClass( "file_action_icon_uploaded" );
		$currentItem.removeClass( "file_item_uploading" );
		$currentItem.addClass( "file_item_upload_complete" );
		if( fileList.length == uploadCount ){
			complete();
			return;
		}
		uploadAt( uploadCount );
	});
	formData = new FormData();
	formData.append( "file", fileList[ index ] );
	xhr.open( "POST", "./files/upload_single.php" );
	xhr.send( formData );
}

function complete(){
	alert( "complete...!!!" );
}

function createFileItems( files ){
	var file;
	var $item;
	var size = 0;
	for( var i=0, count=files.length ; i<count ; i+=1 ){
		file = files[ i ];
		fileList.push( file );
		size = Math.ceil( file.size/1000 );
		$item = $( "<li class='file_item'></li>");
		$item.append( $( "<div class='uploader_desc_filename'><sapn>"+file.name+"<span></div>") );
		$item.append( $( "<div class='uploader_desc_filesaction'><a href='#' class='file_action_icon_added'></a></div>") );
		$item.append( $( "<div class='uploader_desc_filestatus'>0%</div>") );
		$item.append( $( "<div class='uploader_desc_filesize'>"+size+"kb</div>") );
		$fileList.append( $item );
		fileTotalSize += size;
	}
}

function addEventFileItem(){
	$( ".uploader_desc_filesaction a" ).on( "click", function(){
		var index = $( ".uploader_desc_filesaction a" ).index( $(this) );
		$( ".file_item" ).eq( index ).remove();
		fileTotalSize -= Math.ceil( fileList[ index ].size / 1000 );
		updateTotalSize();
		fileList.splice( index, 1 );
		
	});
}

function updateTotalSize(){
	$fileTotalSizeLabel.text( fileTotalSize+"kb" );
	$totalProgress.prop( "max" , fileTotalSize );
}